<template>
    <div id="half" class="half">
        <img
            class="info-alert"
            :src="this.defaultConfig.windowVideo"
        />
        <div class="close-btn">   
            <img
                class="close-btn-img"
                @click="onClickClose"
                :src="this.defaultConfig.windowClose"
            />
        </div>
        <div class="info">
            <div class="info-title"><span>{{title}}</span></div>
            <div class="info-text">{{text}}</div>
            <div>
                <div class="switch-tab">
                    <span @click="onClickDownload" id="download" :class="{yspCountColor: switchtabkey === 'download'}"><span :class="{yspCountDot: switchtabkey != 'download'}">·</span>点播</span> | 
                    <span @click="onClickLive" id="live" :class="{yspCountColor: switchtabkey === 'live'}"><span :class="{yspCountDot: switchtabkey != 'live'}">·</span>直播</span> | 
                    <span @click="onClickYspAccount" id="yspCount" :class="{yspCountColor: switchtabkey === 'yspCount'}"><span :class="{yspCountDot: switchtabkey != 'yspCount'}">·</span>央视频号</span>
                </div>
                <div v-if="switchtabkey === 'download'">
                    <div class="info-videotitle">{{videotitle}}</div>
                    <img
                        @click="onClickLink(null,videoid,null)"
                        v-if="videoJumpTag === 'true' && !this.isYspApp()" 
                        class="info-video"
                        :src="videovcover"
                    />
                    <Player
                        v-else-if="videoConfig && videoConfig.vid"
                        class="info-video"
                        :config="videoConfig"
                        @stateChange="onStateChange"
                        ref="video"
                    />
                    <img
                        @click="onClickLink(null,videoid,null)"
                        class="txtCoverBg-video"
                        :src="this.defaultConfig.txtCoverBg"
                    />
                </div>
                <div v-else-if="switchtabkey === 'live'">
                    <div class="info-videotitle">{{videolivetitle}}</div>
                    <img
                        @click="onClickLink(null,videoid,null)"
                        class="info-video"
                        :src="videolivevcover"
                    />
                    <img
                        @click="onClickLink(null,videoid,null)"
                        class="txtCoverBg-video"
                        :src="this.defaultConfig.txtCoverBg"
                    />
                </div>
                <div v-else-if="switchtabkey === 'yspCount'">
                    <div class="yspCount-area">
                        <span class="yspCount-tip">关注相关央视频号,了解更多信息</span>
                        <div class="yspCount-div">
                            <img
                                class="yspCountImg"
                                @click="followAddImgClick"
                                :src="yspCountImg"
                            >
                            <img
                                class="followAddImg"
                                @click="followAddImgClick"
                                :src="followAddImg"
                            >
                        </div>
                        <!-- <div>
                            <div class="yspCount-info">
                                <div ><img class="yspCount-avatar" :src="videoavatar"/></div>
                                <div class="yspCount-title-area">
                                    <div class="yspCount-title">万米深潜</div>
                                    <div class="yspCount-title-child">2020年，由中国自主研发制造的万米级...</div>
                                </div>
                                <div class="yspCount-follow">+关注</div>
                            </div>
                        </div> -->
                    </div>
                </div>
                <img
                    v-if="(switchtabkey === 'download' && (videoJumpTag === 'true' && !this.isYspApp()))|| switchtabkey === 'live'"
                    @click="onClickLink(null,videoid,null)"
                    class="playBtn-video"
                    :src="this.defaultConfig.playBtn"
                />
                
            </div>
        </div>
        <div class="bottom-btn-div">
            <div id="respect" class="respect">{{repsectPeople}}人已致敬</div>
            <img
                @click="onClickLink(null,videoid,null)"
                class="videoMore-video"
                :src="this.defaultConfig.videoMore"
            />
            <img
                class="bottom-btn"
                @click="btnCommentClick"
                :src="this.defaultConfig.btnMark"
            />
            <img
                class="bottom-btn"
                @click="btnRespectClick"
                :src="this.defaultConfig.btnRespect"
            />
            <p style="position: absolute;left:0;top: 0;right:0;bottom:0;" v-if="aniImgShow">
                <img src="https://img.yangshipin.cn/assets/心-k5s0n3bq53q9.png" alt="" class="heart-ani1">
                <img src="https://img.yangshipin.cn/assets/like-kbagb0y2vlf.png" alt="" class="heart-ani2">
                <img src="https://img.yangshipin.cn/assets/like-ka7zte106mwp.png" alt="" class="heart-ani">
            </p>
        </div>
        <div class="comment-wraper" id="comment-id">
            <Comment
                ref="comment"
                pid="600054068"
                targetId="1"
                :linkAppUrl=linkAppUrl
                />
            <!-- <Comment
            本直播pid="600054068"
            测试pid="600016602"
            vid="q000008d8va"
                v-if="data.data.model && linkAppUrl"
                :pid="data.data.model.livepid"
                :vid="data.data.model.vid"
                :targetId="data.data.model.targetId"
                :hostVuids="data.data.model.host ? data.data.model.host : []"
                :linkAppUrl="data.data.model.linkOption == '打开H5' ? linkAppUrl : ''"
                /> -->
            <!-- <iframe src="https://www.baidu.com" width="100%" frameborder="0" height="200px">
                <p>您的浏览器暂不支持查看评论.</p>
            </iframe> -->
            
        </div>
    </div>
</template>

<script>
import axios from "axios";
import Comment from 'lv/Comment';
import User from "../../node_modules/@tencent/cctvh5-ui/packages/Model/user"
import $getImgUrl from 'lv/Util/getImgUrl';
import { Tween, Particle, Data, Animation } from "@/utils/animation";
import Player from "../../node_modules/@tencent/cctvh5-ui/packages/LiveMedia"
import { EventBus } from "../utils/EventBus.js";

export default {
    name: "Alert",
    components: {
        Comment,
        Player
	},
    data() {
        return {
            aniImgShow: false,
            linkAppUrl: "",
            text:"",
            title:"",
            videoid:"",
            videopid:"",
            videotitle:"",
            videolivetitle:"万米深潜直播",
            videotype:"",
            videovcover:"",
            videolivevcover:"",
            videoavatar:"",
            yspCountImg:"",
            followAddImg: "",
            callback: undefined,
            particles:[], //气泡数组
            switchtabkey: "download",
            repsectPeople: parseInt(localStorage.getItem("yspRepsectPeople")) || 0,
            videoJumpTag: sessionStorage.getItem("YspVideoJumpTag") || "true",
            videoConfig:{
                "vid":"",
                "poster":""
            }
        };
    },
    methods: {
        isYspApp(){
            if(navigator.userAgent.indexOf('yangshipin') >= 0){
                return true
            }
            return false
        },
        async actionCp() {
            let url = '//h5access.yangshipin.cn/web/follow_action?vappid=59306155&vsecret=b42702bf7309a179d102f3d51b1add2fda0bc7ada64cb801&raw=1&CPId=21238457084818071&Opt=1'  // `${realm}${front}activity/apply/v1/create`
            return new Promise((resolve) => {
                axios.defaults.withCredentials=true
                axios.get(url, { 
                    // CPId: '21238457084818071',
                    //  Opt: 1 
                    })
                    //成功返回
                    .then(response => {
                        alert("关注成功")
                
                        console.log(response);
                        resolve(response)
                    })
                    //失败返回
                    .catch(error => {
                        alert("关注失败")
                        console.log(error);
                    })
                
                })
        },
        async cpInfo() {
            console.log('url2222:: ', url2)
            let url2 = '//h5access.yangshipin.cn/web/follow_cp_info?vappid=59306155&vsecret=b42702bf7309a179d102f3d51b1add2fda0bc7ada64cb801&raw=1&CPID=21238457084818071'  // `${realm}${front}activity/apply/v1/create`
            return new Promise((resolve) => {
            console.log('url333333:: ')
            axios.defaults.withCredentials=true
            axios.get(url2, { 
                // CPID: '21238457084818071' //: 18141106690380925,
                // Opt: 1 
                })
                //成功返回
                .then(response => {
                console.log('查询结果：')
                    console.log(response);
                    alert(JSON.stringify(response))
                    resolve(response)
                })
                //失败返回
                .catch(error => {
                console.log('error:: ')
                    console.log(error);
                })
            })
        },
        async startFollow(){
            let ac =  await this.actionCp()
        },
        followAddImgClick(){
            this.callApp(null,"https://m.yangshipin.cn/user?cpid=21238457084818071&ptag=4_1.8.0.21678_wxf")
            // if(navigator.userAgent.indexOf('yangshipin') >= 0){
            //     let that = this
            //     User.isSigned().then(function (signed) {
            //         if (signed) {
            //             that.startFollow()
            //         } else {
            //             User.signin()
            //         }
            //     })
            // }else{
            //     this.callApp(null,"https://m.yangshipin.cn/user?cpid=21238457084818071&ptag=4_1.8.0.21678_wxf")
            // }
        },
        btnRespectClick(){
            //storage num
            // 点致敬后飘爱心
            let tempParam = "deepAction=chinaHonor&currentDeep="+parseInt(localStorage.getItem("YspCurrentDeep"))+"&YspDistance="+parseInt(localStorage.getItem("YspDistance"))+"&YspFinishHonor="+parseInt(localStorage.getItem("YspFinishHonor"))
            console.log('tempParam', tempParam)
            if(!this.aniImgShow){
                this.aniImgShow = true
                localStorage.setItem("YspFinishHonor",1)
                setTimeout(()=> {
                    this.aniImgShow = false
                }, 2000)
            }
            
            localStorage.setItem("YspFinishHonor",1)
            $(document).trigger('trace', {
                BossId: '8323',
                Pwd: '1622602298',
                faction: 'kvcollect',
                star_id: 'id2283',
                liked_nums: 1
            })
            this.repsectPeople += 1
            localStorage.setItem("yspRepsectPeople", this.repsectPeople)
            this.getRespectPeople()
        },
        btnCommentClick(){
            let href = "https://m.yangshipin.cn/static/x/iframe/deepDiving/index.html#/game";
                
            let tempParam = "deepAction=chinaHonor&currentDeep="+parseInt(localStorage.getItem("YspCurrentDeep"))+"&YspDistance="+parseInt(localStorage.getItem("YspDistance"))+"&YspFinishHonor="+parseInt(localStorage.getItem("YspFinishHonor"))+"&yspRepsectPeople="+parseInt(localStorage.getItem("yspRepsectPeople"))+"&YspFishNum=" +
            parseInt(localStorage.getItem("YspFishNum")) 
            if(href.indexOf('?') === -1){
               href = href + "?" + tempParam
            }else{
               href = href + "&" + tempParam
            }
            //this.callApp(null,null,href)
            this.linkAppUrl = encodeURIComponent(href)
            this.$forceUpdate()
            console.log('跳转链接：', href, this.linkAppUrl)
            setTimeout(() => {
                this.$refs.comment.openSendBox()
            }, 800)
        },
        onStateChange(state) {
            console.info('state Change', state);
            if(parseInt(state) === 1){
                //播放中
                EventBus.$emit("isVideoPlayAndPauseBgMusic", true)
            }
            if(parseInt(state) === 2){
                //暂停
            }
            if(parseInt(state) === 3){
                //播放完毕
            }
        },
        /**
         * 清除气泡
         */
        clearBubbles(){
            for (let i = 0; i < this.particles.length; i++) {
                this.particles[i].destroyPartical();
            }
        },
        onClickYspAccount(){
            this.switchtabkey = "yspCount"
        },
        onClickLive(){
            this.switchtabkey = "live"
        },
        onClickDownload(){
            this.switchtabkey = "download"
        },
        onClickClose() {
            let height = parseFloat(
                window.getComputedStyle(document.getElementById("half")).height
            );
            if (this.callback) this.callback();
            let that = this;
            this.tweenMove("half", 0, height, 200, function () {
                that.deleteHalfMore();
            });
        },
        
        onClickLink(pid, vid, url) {
            if(navigator.userAgent.indexOf("yangshipin") >= 0){
                if(this.switchtabkey === "download"){
                    this.clickLink(null, this.videoid, null);
                }else{
                    this.clickLink(this.videopid, null, null);
                }   
            }else{
                if(this.switchtabkey === "download"){
                    this.videoJumpTag = "false"
                    sessionStorage.setItem("YspVideoJumpTag", "false")
                }
                let href = "https://m.yangshipin.cn/static/x/iframe/deepDiving/index.html#/game";
                
                let tempParam = "deepAction=chinaHonor&currentDeep="+
                this.currentDeep+
                "&YspDistance="+
                parseInt(localStorage.getItem("YspDistance"))+
                "&YspFinishHonor="+
                parseInt(localStorage.getItem("YspFinishHonor"))+
                "&nowFish="+this.nowFish +
                "&yspRepsectPeople="+
                parseInt(localStorage.getItem("yspRepsectPeople"))+
                "&YspFishNum=" +
                parseInt(localStorage.getItem("YspFishNum")) 
                if(href.indexOf('?') === -1){
                    href = href + "?" + tempParam
                }else{
                    href = href + "&" + tempParam
                }
                this.callApp(null,null,href);
            }
        },
        getImg(url, size) {
            url = url || '';
            url = url.replace(/\?[^?]+/, '');
            size = size * document.documentElement.clientWidth / 375;
            const imgUrl = $getImgUrl({
                url,
                type: [ 'jpg'],
                size
            });
            return imgUrl;
        },
        async getRespectPeople(){
            await this.getRespect((res) => {
                if(res > this.repsectPeople) this.repsectPeople = res
            })
        }
    },
    async created(){
        //cpid=21238457084818071 
        let url = "https://h5access.yangshipin.cn/web/detail_share?vappid=59306155&vsecret=b42702bf7309a179d102f3d51b1add2fda0bc7ada64cb801&raw=1&vid=" + this.videoid;
        await axios.get(url).then((res) => {
            let temp = this.getImg(res.data.data.cover_pic,1000);
            this.videovcover = temp;
            this.videoConfig.vid = res.data.data.vid
            this.videoConfig.poster = temp
        })
        //live
        await axios.get("https://h5access.yangshipin.cn/web/cp_homepagehtml_feed?vappid=59306155&vsecret=b42702bf7309a179d102f3d51b1add2fda0bc7ada64cb801&raw=1&cpid=21238457084818071").then((res) => {
            if("live_data" in res.data.data){
                this.videolivevcover = this.getImg(res.data.data.live_data[0].pic,1000);
                this.videolivetitle = res.data.data.live_data[0].title
                //this.videopid = res.data.data.live_data[0].pid
            }
        })
        this.getRespectPeople()
    },
    mounted() {
        let that = this;
        setTimeout(() => {
            let height = parseFloat(
                window.getComputedStyle(document.getElementById("half")).height
            );
            that.tweenMove("half", 0, -height, 200);
            let bubble = new Animation();
            bubble.animationBubble(document.getElementById("comment-id"));
        }, 200);
        // this.linkAppUrl = window.location.href
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .yspCount-div{
        position: relative;
    }
    .yspCountImg{
        width: 100%;
    }
    .followAddImg{
        position: absolute;
        right: 5px;
        width: 65px;
        top: 50%;
        margin-top: -18px;
    }
    .yspCount-title-area{
        font-size: 16px;
        font-weight: bold;
        color: #000;
        text-align: left;
        width: 68%;
        padding-left: 5px;
    }
    .yspCount-title-child{
        font-size: 14px;
        color: #666;
    }
    .bottom-btn-div{
        position: relative;
        display: flex;
        justify-content: space-around;
        margin-top: 0px;
        width: 100%;
        z-index: 999
    }
    .heart-ani{
        position: absolute;
        width: 20px;
        height: 17px;
        bottom: 18px;
        right: 85px;
        animation: heartShow 2s;
    }
    .heart-ani1{
        position: absolute;
        width: 20px;
        height: 17px;
        bottom: 18px;
        right: 85px;
        animation: heartShow1 2s;
    }
    .heart-ani2{
        position: absolute;
        width: 20px;
        height: 17px;
        bottom: 18px;
        right: 85px;
        animation: heartShow2 2s;
    }
    @keyframes heartShow {
        0%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            transform: scale(1.5);
            bottom: 56px;
        }
    }
     @keyframes heartShow1 {
        0%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            transform: scale(1.3);
            bottom: 39px;
            right: 40px;
        }
    }
     @keyframes heartShow2 {
        0%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            transform: scale(1.3);
            bottom: 39px;
            right: 120px;
        }
    }
    .bottom-btn{
        display: inline-block;
        width: 102px;
        height: 31px;
        margin: 10px;
    }
    .yspCountDot{
        visibility: hidden;
    }
    .yspCountColor{
        color:#E1CF97
    }
    .yspCount-follow{
        color: #fff;
        background: #BC1C42;
        border-color: #BC1C42;
        width: 68px;
        height: 30px;
        border-radius: 10px;
        line-height: 30px;
    }
    .yspCount-avatar{
        width: 56px;
        height: 56px;
        border-radius: 28px;
    }
    .yspCount-area{
        width: 100%;
        height: 170px;
        border-radius: 10px;
        text-align: center;
    }
    .yspCount-tip{
        font-size: 14px;
        color: #fff;
        font-weight: bold;
    }
    .switch-tab{
        display: flex;
        justify-content: space-around;
        margin-bottom: 5px;
        color: #fff;
        font-weight: bold;
    }
    .info-alert{
        width:100%;
        height: 425px;
    }
    .close-btn{
        position: absolute;
        right: 12px;
        top: 12px;
    }
    .close-btn-img{
        width: 48px;
    }
    .info{
        position: absolute;
        top:40px;
        margin: 5px 25px;
    }
    .respect{
        font-size: 14px;
        color: #fff;
        position: absolute;
        left: 25px;
        top: -25px;

    }
    .respect-fix{
        font-size: 12px;
        color: #fff;
        position: relative;
        bottom: 0px;
        top: 5px;
    }
    .videoMore-video{
        position: absolute;
        right: 15px;
        top: -25px;
        width: 100px;
    }
    .info-title{
        color: #E1CF97;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin: 10px 0px;
    }
    .info-title span{
        background: linear-gradient(to bottom, #fff6dc, #d6c185);
        -webkit-background-clip: text;
        color: transparent;
    }
    .info-text{
        font-size: 12px;
        letter-spacing: 1px;
        color: #fff;
        margin-bottom: 5px;
        text-indent:2em;
    }
    .yspCount-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 5px;
        padding: 0px 10px 0px 20px;
    }
    .info-videotitle{
        color:#fff;
        position: absolute;
        z-index: 999;
        margin-left: 5px;
    }
    .info-video{
        position: relative;
        width: 100%;
        height: 182px;
        border-radius: 15px;
    }
    .v-videoPlayer{
        height: 182px !important;
    }
    .txtCoverBg-video{
        position: absolute;
        width: 100%;
        left: 0;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .playBtn-video{
        position: relative;
        left: 10px;
        bottom: 55px;
        width: 32px;
        height: 32px;
    }
    .half {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        bottom: -100%;
        z-index: 9999;
        font-family: PingFangSC-Medium, PingFang SC;
        background:#000;
        filter: alpha(opacity=97);
        opacity: 0.97;   
    }
    .comment-wraper{
        /* position: fixed;
        bottom:0;
        left: 0;
        right: 0;
        top: 468px; */
        height: calc(100vh - 468px);
    }
    </style>
    <style>
    /* 评论部分样式 */
    .v-comment{
        height: 100%;
        background:none;
        padding: 0 27px;
    }
    .v-comment,.v-comment-content,.v-comment-box{
        box-sizing: border-box;
        height: 100%;
    }

    .v-comment-title,.v-comment-top,.v-comment-bottom{
        height: 0;
        padding:0;
        display: none;
    }
    .v-comment-item{
        background: rgba(47,114,166, 0.54);
        border-radius: 14px;
        position: relative;
        min-height: 28px;
        margin-bottom: 8px;
    }
    .v-comment-item-convideo-title{
        margin-bottom: 3px;
    }
    .v-comment-item-convideo .img{
        width: 16px;
        height: 16px;
        border: 1px solid #a8d4f7;
        border-radius: 100%;
        overflow: hidden;
    }
    .v-comment-item-nick{
        font-size: 12px;
        color: #DAD9F1;
        font-weight: normal;
        line-height: 15px;
    }
    .v-comment-item-text{
        font-size: 12px;
        color: #fff;
        line-height: 15px;
        margin-bottom: -3px;
    }
    .v-comment-item-convideo .v-comment-item-text{
        margin-left: 30px;
    }
    .v-comment-item-con{
        background: none;
    }
    .v-comment-none-img{
        /* background-image: url() */
        opacity: 0.3;
        margin-bottom:5px;
    }
    /* .v-comment-trigger{
        position: absolute;
        top: -30px;
        left: 10px;
    } */

</style>
